<style scoped>
    .line {

    }

    .line div {
        height: 0px;
        border-bottom: 1px dotted #ddd;
        /*margin-top: 15px;*/
        margin-bottom: 24px;
        margin-right: 15px;
    }

    .pro-detail-content {
        padding-left: 20px;
    }

    .pr20 {
        padding-right: 20px;
    }

    h3 {
        /* margin-bottom: 20px; */
    }

    .btn {
        height: 30px;
        line-height: 28px;
        border: 1px solid #eee;
        width: 30px;
        text-align: center;
        color: #FFF;
        border-radius: 4px;
        float: right;

    }

    .close {
        background-color: #F39B12;
    }

    .add {
        background-color: #428CCB;
        margin-right: 10px;
    }

    .form .ivu-row {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .common-box-body .ivu-input-group {
        top: 0;
    }

    .common-box-body {
        padding-left: 15px;
    }

    .common-box-header {
        margin-right: 15px;
    }

    .boderBottom {
        border-bottom: 1px solid #E2E2E2;
    }
    @media screen and (max-width: 1200px) {
        .pr0{
            padding-right: 0 !important;
        }
    }
    /*.pr0{*/
        /*padding-right: 0;*/
    /*}*/

</style>
<style>
    .form .ivu-input-group > .ivu-input:last-child, .ivu-input-group-append {
        border-radius: 0 2px 2px 0 !important;
        background-color: #fff;
    }
</style>
<template>
    <div class="">
        <product-title></product-title>
        <div class="common-box-body">
            <!-- ref="proform" :rules="ruleValidate"          -->
            <Form :model="proform" ref="proform" :rules="ruleValidate" label-position="right" class="">
                 <Row>
                    <Col :md="24" :lg="6">
                    <FormItem label="产品名称" prop="mid">
                        <!-- <i-select v-model="proform.mid"  disabled>
                            <i-option :value="proform.mid" :key="proform.mid">{{proform.pro_name}}</i-option>
                        </i-select> -->
                        <Input v-model="proform.pro_name" placeholder="请输入产品名称" disabled></Input>
                    </FormItem>
                    </Col>
                    <Col :md="24" :lg="6">
                    <FormItem label="佣金名称" prop="name">
                        <Input v-model="proform.name" placeholder="请输入佣金名称"></Input>
                    </FormItem>
                    </Col>
                    <Col :md="24" :lg="6">
                    <FormItem label="开始时间" prop="start_dateTime">
                        <DatePicker type="date" placeholder="请选择开始时间" v-model="proform.start_dateTime" @on-change="dateChange($event,proform,'start_date')"></DatePicker>
                    </FormItem>
                    </Col>
                    <Col :md="24" :lg="6">
                    <FormItem label="结束时间" prop="stop_dateTime">
                        <DatePicker type="date" placeholder="请选择结束时间" v-model="proform.stop_dateTime" @on-change="dateChange($event,proform,'stop_date')"></DatePicker>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                     <Col :md="24" :lg="12">
                    <FormItem label="归属机构" prop="belong">
                        <i-input placeholder="请输入归属机构" v-model="proform.belong"></i-input>
                    </FormItem>
                    </Col>
                     <Col :md="24" :lg="6">
                    <FormItem label="销售奖金">
                        <i-input placeholder="请输入销售奖金" v-model="proform.bonus"></i-input>
                    </FormItem>
                    </Col>
                     <Col :md="24" :lg="6">
                    <FormItem label="保单年度" >
                        <i-input placeholder="请输入保单年度" v-model="proform.policy_year"></i-input>
                    </FormItem>
                    </Col>
                </Row>
                <div class="common-box-header mb24">
                    <h3 class="">折标系数</h3>
                </div>
                <Row v-for="(items, index) in proform.scaling" :key="index" class="">
                    <Col :md="24" :lg="6">
                    <FormItem :label="'交费期间'">
                        <i-input v-model="items.pay_period" placeholder="请选择交费期间" disabled></i-input>
                    </FormItem>
                    </Col>
                    <Col :md="24" :lg="6">
                    <FormItem :label="'折标系数'">
                        <Input v-model="items.val" placeholder="请输入折标系数">
                        <span slot="append">%</span>
                        </Input>
                    </FormItem>
                    </Col>
                    <Col :md="24" :lg="12" class="pr15 mb24">
                    <span @click="scalingRemove(index)">
                            <Icon type="close-round" class="btn close"></Icon>
                        </span>
                    <span @click="scalingAdd" v-if="(proform.scaling.length-1)==index">
                            <Icon type="plus" class="btn add"></Icon>
                        </span>
                    </Col>
                    <i-col :md="24" :lg="24" class="line">
                        <div></div>
                    </i-col>
                </Row>
                <div class="common-box-header mb24">
                    <h3>佣金系数</h3>
                </div>
                <div class="pr15" v-if="proform.fees.length>0">
                    <Tabs type="card" >
                        <template v-for="(item,index) in proform.fees">
                            <TabPane :label="item.times==1?'第一年度':item.times==2?'第二年度':item.times==3?'第三年度':item.times==4?'第四年度':item.times==5?'第五年度':item.times==6?'第六年度及以上':''">
                            <div class="line">
                                <div style="margin-right: 0;margin-top: 8px;"></div>
                            </div>
                            <template v-for="(item1,index1) in item.fee">
                                <Row>
                                    <i-col :md="24" :lg="6" class="">
                                        <FormItem label="交费期间" class="pr0">
                                            <i-input placeholder="请输入交费期间" v-model="item1.pay_period" disabled></i-input>
                                        </FormItem>
                                    </i-col>
                                    <i-col :md="24" :lg="6">
                                        <FormItem label="佣金系数" class="pr0">
                                            <Input placeholder="请输入佣金系数" v-model="item1.val">
                                            <span slot="append">%</span>
                                            </Input>
                                        </FormItem>
                                    </i-col>
                                    <Col :md="24" :lg="12" class="mb24">
                                    <span @click="feesRemove0(index,index1)">
                                        <Icon type="close-round" class="btn close"></Icon>
                                    </span>
                                    <!-- <span @click="feesAdd0(index)" v-if="(item.fee.length-1)==index">
                                        <Icon type="plus" class="btn add"></Icon>
                                    </span> -->
                                    </Col>
                                    <i-col :md="24" :lg="24" class="line ">
                                        <div style="margin-right: 0"></div>
                                    </i-col>
                                </Row>
                            </template>
                        </TabPane>
                        </template>
                    </Tabs>
                </div>


                <FormItem>

                </FormItem>
            </Form>
            <div id="footer" class="pt22">
            <!-- <Button type="primary" @click="sendAll('proform')">提交</Button>
            <Button type="ghost" @click="cancel()" style="margin-left: 8px">取消</Button> -->
            <Button type="primary" shape="circle" id="submit" @click="sendAll('proform')" style="border-radius: 30px !important;">
                <Icon type="checkmark-circled"></Icon>
                保存 / 提交
            </Button>
            <Button id="back" shape="circle" @click="cancel" style="border-radius: 30px !important;">返回</Button>
        </div>
        </div>
        
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle'
    import {getProListAll} from '../../api/product_v2'
    import {createFee} from '../../api/fee'
    import {getRoleAll} from '../../api/role'

import {_pay_period_info,_agency_info,_agency_update} from '../../api/product_v2'
import {_FeeCreate} from '../../api/fee'
    export default {
        data() {
            return {
                proform: {
                    name: '',
                    mid: '',
                    start_date:'',
                    start_dateTime:'',
                    stop_date:'',
                    stop_dateTime:'',
                    belong:'',
                    bonus:'',
                    policy_year:'',
                    scaling: [
                        {
                            pay_period: "",
                            val: ''
                        },
                    ],
                    fee_id:'',
                    fees:[
                    ]
                    // fees: [
                    //     {
                    //         times: "1",
                    //         period: "",
                    //         fee: [
                    //             {
                    //                 pay_period: "",
                    //                 val: ''
                    //             },
                    //         ]
                    //     },
                    // ]
                },
                prolist: [],
                period: [],
                pay_period: [],
                role: [],
                ruleValidate: {
                    belong:[
                        {required: true, message: '机构不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '佣金名称不能为空', trigger: 'blur'}
                    ],
                    mid: [
                        {required: true, message: '产品名称不能为空', trigger: 'blur'}
                    ],
                    role_id: [
                        {required: true, message: '角色不能为空', trigger: 'blur'}
                    ],
                    start_dateTime:[
                        {required: true, message: '开始时间不能为空'}
                    ],
                    stop_dateTime:[
                        {required: true, message: '结束时间不能为空'}
                    ]
                }
            }
        },
        components: {
            productTitle,

        },
        mounted() {
        },
        created() {
            this.proform.mid = this.$route.params.id;
            this.proform.pro_name = this.$route.params.name;
            // this.getList()
            // this.getPay_period()
            this.getDetial();
        },
        watch: {
            '$route'(to, from) {
                // 对路由变化作出响应...
            }
        },
        mounted(){
            
        },
        methods: {
            getDetial(){
                let params={
                    agreement_id:this.$route.params.agency_id
                }
                new Promise((resolve, reject) => {
                    _agency_info(params).then(response => {
                        if (response.data.err == 0) {
                            this.proform.name=response.data.data.name;
                            this.proform.pro_name=response.data.data.pname;
                            this.proform.mid=response.data.data.ptid;
                            this.proform.scaling=response.data.data.scaling;
                            // this.proform.fees=response.data.data.fees;
                            this.proform.agreement_id=response.data.data.id;
                            this.proform.belong=response.data.data.belong;
                            this.proform.bonus=response.data.data.bonus;
                            this.proform.start_date=response.data.data.start_date;
                            this.proform.start_dateTime=response.data.data.start_date;
                            this.proform.stop_date=response.data.data.stop_date;
                            this.proform.stop_dateTime=response.data.data.stop_date;
                            this.proform.policy_year=response.data.data.policy_year;

                             this.proform.fees=[];
                             let _this = this;
                            //  response.data.data.fees.map(item=>{
                            //      this.proform.fees.push(item)
                            //  })
                             if(response.data.data.fees[0].times){
                                 response.data.data.fees.map(item=>{
                                    this.proform.fees.push(item)
                                })
                             }else{
                                 for(let i=0;i<response.data.data.fees.length;i++){
                                    _this.proform.fees.push({times:0,fee:[]});
                                    
                                    _this.proform.fees[i].times=i+1;
                                    _this.proform.fees[i].fee=response.data.data.fees[i];
                                    console.log(_this.proform.fees);
                                 }
                             }
                            //  console.log( _this.proform.fees);
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            proChange(index) {
                //console.log(index)
                var _prolist = this.prolist[index]
                this.period = _prolist.period
                this.pay_period = _prolist.pay_period
            },
            periodAdd(index) {
                console.log(index)
                //this.proform.fees[index].period = this.period[0]
                //console.log(this.proform.fees[index].period)
                // console.log(this.proform.fees[index].period?true:false)
                this.$set(this.proform.fees[index], 'period', this.period[0])
            },
            feesAdd(index) {
                this.proform.fees[index].fee.push({
                    pay_period: '',
                    val: ''
                })
            },
            timesAdd() {
                this.proform.fees.push({
                    fee: [{
                        pay_period: '',
                        val: ''
                    }]
                })
            },
            scalingAdd() {
                this.proform.scaling.push(
                    {
                        pay_period: '',
                        val: ''
                    }
                )
            },
            scalingRemove(index) {
                this.proform.scaling.splice(index, 1);
            },
            periodRemove(index) {
                this.proform.fees[index].period = '';
            },
            payTypeRemove(index) {
                this.proform.pay_type.splice(index, 1);
            },
            handleRemove(index) {
                this.proform.pay_period.splice(index, 1);
            },




            feesAdd0(index){
                this.proform.fees[index].fee.push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove0(index,index1) {
                this.proform.fees[index].fee[index1].splice(index, 1);
            },
            feesAdd1(){
                this.proform.fees[1].push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove1(index) {
                this.proform.fees[1].splice(index, 1);
            },
            feesAdd2(){
                this.proform.fees[2].push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove2(index) {
                this.proform.fees[2].splice(index, 1);
            },
            feesAdd3(){
                this.proform.fees[3].push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove3(index) {
                this.proform.fees[3].splice(index, 1);
            },
            feesAdd4(){
                this.proform.fees[4].push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove4(index) {
                this.proform.fees[4].splice(index, 1);
            },
            feesAdd5(){
                this.proform.fees[5].push({
                    pay_period:'',
                    val:''
                });
            },
            feesRemove5(index) {
                this.proform.fees[5].splice(index, 1);
            },





            getList() {
                new Promise((resolve, reject) => {
                    getProListAll().then(response => {
                        if (response.data.err == 0) {
                            this.prolist = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            getRole() {
                new Promise((resolve, reject) => {
                    getRoleAll().then(response => {
                        if (response.data.err == 0) {
                            this.role = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
             getPay_period() {
                 let params={
                     mid:this.$route.params.id
                 }
                new Promise((resolve, reject) => {
                    _pay_period_info(params).then(response => {
                        if (response.data.err == 0) {
                            // this.proform.scaling =  
                            let _this= this;
                            if(response.data.data.pay_period.length>0){
                                _this.proform.scaling=[];
                                response.data.data.pay_period.map(item=>{
                                    _this.proform.scaling.push({
                                        pay_period:item,
                                        val:''
                                    })
                                })
                            }
                            for(let i=0;i<response.data.data.pay_arr.length;i++){
                                if(response.data.data.pay_arr[i].length>0){
                                    _this.proform.fees[i]=[];
                                    response.data.data.pay_arr[i].map(item=>{
                                        _this.proform.fees[i].push({
                                            pay_period:item,
                                            val:''
                                        })
                                    })
                                }
                            }                     
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            sendAll(name) {
                this.$refs['proform'].validate((valid) => {
                    if (valid) {
                        new Promise((resolve, reject) => {
                            _agency_update(this.proform).then(response => {
                                if (response.data.err == 0) {
                                    this.$Message.success(response.data.info);
                                    // this.$router.push({name:'agency_list',params:{id:this.proform.mid,name:this.proform.pro_name}});
                                    this.$router.push({name:'pro'});
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        });
                    } else {
                    }
                })
            },
            cancel() {
                // this.$router.push({name: 'agency_list',params:{id:this.proform.mid,name:this.proform.pro_name}});
                this.$router.push({name:'pro'});
            },
            dateChange(val,obj,attr){
                obj[attr] = val;
            }
        }
    }
</script>